<template>
  <basic-dialog
    title="关联商品"
    width="55%"
    :visible="dialogVisible"
    :show-close="false"
    :showFooter="false"
  >
    <BasicForm
      ref="formData"
      formItemWidth="80px"
      isBtnBarSingleRow
      :isScalingBtn="false"
      :formColumns="formItemList"
      :dataSource="formData"
      :handleSearchForm="handleQuery"
      :hasQueryPermission="false"
      :defaultExpandStatus="true"
      @getFormData="getFormDataFn"
    >
      <template slot="extensionActions">
        <el-button type="primary" @click="handleBatchLinked">批量关联</el-button>
        <el-button @click="handleCancel">取消</el-button>
      </template>
    </BasicForm>
    <SkusTable
      class="table-wrap"
      showSelectCol
      showPagination
      :loading="tableInfo.loading"
      :columns="tableInfo.columns"
      :dataSource="tableInfo.list"
      :pagination="pagination"
      :total="pagination.total"
      :selectionChange="handleSelectionChange"
      :pageSizes="pageSizes"
      @pageChange="handlePageChange"
      @pageSizeSelect="handlePageSizeChange"
    />
  </basic-dialog>
</template>
<script>
import { getBtnsId } from '@/libs/btnsPermission';
import BasicDialog from '@/components/BasicDialog';
import BasicForm from '@/components/BasicForm';
import SkusTable from '@/components/skusTable';
import { getSkuPagerService } from '@/api/commodity/commodityManage/chageFromManage/skuSpecEdit';
export default {
  components: {
    BasicDialog,
    BasicForm,
    SkusTable
  },
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    columns: {
      type: Array,
      default () {
        return [];
      }
    },
  },
  data () {
    return {
      dialogVisible: false,
      formData: {
        skuNo: '',
        spuNo: '',
        productName: '',
        categoryPath: ''
      },
      formItemList: [
        {
          prop: 'skuNo',
          label: 'SKU编码',
          type: 'input'
        },
        {
          prop: 'spuNo',
          label: 'SPU编码',
          type: 'input'
        },
        {
          prop: 'productName',
          label: '商品名称',
          type: 'input'
        },
        {
          prop: 'categoryPath',
          label: '商品分类',
          type: 'input'
        },
      ],
      tableInfo: {
        list: [],
        selection: [],
        loading: false,
        columns: [
          {
            title: 'SKU编码',
            key: 'skuNo'
          },
          {
            title: 'SPU编码',
            key: 'spuNo'
          },
          {
            title: '商品名称',
            key: 'productName'
          },
          {
            title: '商品分类',
            key: 'categoryPath'
          },
          {
            title: '品牌',
            key: 'brandName'
          },
          {
            title: '规格',
            key: 'specDetail'
          },
        ]
      },
      pagination: {
        pageNum: 1, // 当前页码
        pageSize: 10, // 每页条数
        total: 0 // 总条数
      },
      pageSizes: [10, 100, 500, 1000, 2000, 3000], // 每页显示个数选择器的选项设置
    }
  },
  watch: {
    visible (val) {
      this.dialogVisible = val;
    }
  },
  methods: {
    getFormDataFn (formData) {
      this.formData = formData;
    },
    // 查询
    handleQuery () {
      const curBtnId = getBtnsId('关联商品');
      sessionStorage.setItem('buttonId', curBtnId);
      this.pagination.pageNum = 1;
      this.getTableDataFn();
    },
    async getTableDataFn () {
      const { skuNo, spuNo, productName, categoryPath } = this.formData;
      const data = {
        skuNo,
        spuNo,
        productName,
        categoryPath,
        pageShow: this.pagination.pageSize,
        nowPage: this.pagination.pageNum
      }
      const retData = await getSkuPagerService(
        data,
        state => {
          this.tableInfo.loading = state;
        }
      );
      if (retData) {
        this.tableInfo.list = retData.results;
        this.pagination.total = retData.totalNum;
      }
    },
    // 清空
    handleReset () {
      this.$refs.formData.handleResetForm();
    },
    // 批量关联
    handleBatchLinked () {
      this.$emit('getSelectRows', this.tableInfo.selection);
      this.clearDataStatusFn();
      this.closeDialogFn();
    },
    // 取消
    handleCancel () {
      this.closeDialogFn();
    },
    // 表格数据勾选或勾选取消
    handleSelectionChange (list) {
      this.tableInfo.selection = list;
    },
    // 改变页码
    handlePageChange (currentPage) {
      this.pagination.pageNum = currentPage;
      this.getTableDataFn(); // 重新加载表格数据
    },
    // 改变当前页条数大小
    handlePageSizeChange (pageSize) {
      this.pagination.pageSize = pageSize;
      if (this.tableInfo.list.length === 0) {
        return false;
      }
      this.getTableDataFn(); // 重新加载表格数据
    },
    // 关闭弹框
    closeDialogFn () {
      this.dialogVisible = false;
      this.$emit('update:visible', this.dialogVisible);
    },
    // 清空状态
    clearDataStatusFn () {
      this.handleReset(); // 表单清空
      this.tableInfo.list = []; // 表格清空
      this.pagination = {
        pageNum: 1, // 当前页码
        pageSize: 10, // 每页条数
        total: 0 // 总条数
      }
    },
  }
}
</script>
<style lang="less" scoped>
.table-wrap {
  margin-top: 10px;
}
</style>
